<html>
<head>
<title>
</title>
<link rel="stylesheet" href="style.css">

<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="data/annual.js"></script>

<script>
var map;
var heatmap;
var heatmapData = [];

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    maxZoom: 20,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    zoomControl: true
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('controls'));

  for (set in data) {
    heatmapData[set] = [];
    for (vals in data[set]) {
      heatmapData[set].push(new google.maps.LatLng(data[set][vals].coords[0], data[set][vals].coords[1]));
    }
  }

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData['1750'],
    dissipating: false,
    radius: 2
  });
  heatmap.setMap(map);

  document.getElementById('year-slider').addEventListener('change', setYearRangeFromSliders, false);
  document.getElementById('year-slider-2').addEventListener('change', setYearRangeFromSliders, false);
}

function setYearRangeFromSliders() {
  var y1 = parseInt(document.getElementById('year-slider').value);
  document.getElementById('year-slider-label').textContent = y1;

  var y2 = parseInt(document.getElementById('year-slider-2').value);
  document.getElementById('year-slider-2-label').textContent = y2;

  if (y2 - y1 > 10) {
    if (this == document.getElementById('year-slider')) {
      y2 = y1 + 10;
    } else {
      y1 = y2 - 10;
    }
    setSlidersYears(y1, y2);
    return;
  }

  if (y2 < y1) {
    y2 = y1;
    setSlidersYears(y1, y2);
    return;
  }

  setYearRange(y1, y2);
}

function setYearRange(beginYear, endYear) {
  var d = [];
  for (i = beginYear; i <= endYear; i++) {
    d = d.concat(heatmapData[i.toString()]);
  }
  heatmap.setData(d);
}

function setSlidersYears(beginYear, endYear) {
  document.getElementById('year-slider').value = beginYear;
  document.getElementById('year-slider-2').value = endYear;
  setYearRangeFromSliders();
}
</script>
</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
  <div id="controls" class="control">
    <label id="year-slider-label" class="slider-label" for="year-slider">1750</label>
    <span class="slider-wrap">
      <input type="range" id="year-slider" class="slider" min="1750" max="1854" value="1750" />
    </span>

    <label id="year-slider-2-label" class="slider-label" for="year-slider">1750</label>
    <span class="slider-wrap">
      <input type="range" id="year-slider-2" class="slider" min="1750" max="1854" value="1750" />
    </span>
  </div>
</body>
</html>
